<template>
	<div class="content">
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple"><el-image style="width: 100px; height: 100px" :src="experts.headImg"></el-image></div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="2"><div class="grid-content bg-purple">姓名</div></el-col>
			<el-col :span="22">
				<div class="grid-content bg-purple">{{ experts.name }}</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="2"><div class="grid-content bg-purple">性别</div></el-col>
			<el-col :span="22">
				<div class="grid-content bg-purple">{{ experts.sex }}</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import Table from '@/apis';
export default {
	name: 'showExpert',
	data() {
		return {
			id: this.$route.query.Id,
			experts: {}
		};
	},
	created() {
		this.getExpertById(this.id);
	},
	methods: {
		async getExpertById(id) {
			return await Table.getExpertById(id).then(res => {
				this.experts = res.data.data;
				console.log(this.experts);
			});
		}
	}
};
</script>

<style scoped="scoped">
.content {
	width: 60%;
	margin: 30px auto;
}
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
	text-align: left;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
}
</style>
